<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/swiper.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1516407_l3m4pzglm0g.css">
    <title>Document</title>
    <style>
        .box {
            width: 100%;
            padding-bottom: 20px;
        }

        .topnav {
            width: 100%;
            background-color: #f4f4f4;
            height: 45px;
            line-height: 30px;
            color: #666666;
            font-size: 13px;
            padding: 10px;
            margin: 20px 0px 20px 0px;
        }

        .merchant {
            display: flex;

        }

        .merchant>div {
            flex-direction: column;
        }


        .merchant .left {
            width: 39%;
        }

        .merchant .right {
            width: 26%;
        }

        /* 轮播图 */
        .swiper-container {
            height: 70px;
        }

        .merchant .left>div {
            width: 100%;
        }

        .merchant .left .zhaopian img {
            width: 100%;
        }

        .swiper-button-next,
        .swiper-container-rtl .swiper-button-prev {
            width: 30%;
            height: 30%;
            right: -40px
        }

        .swiper-slide .zhaopian {
            width: 95%;
        }

        .swiper-slide .zhaopian:nth-child(4) {
            width: 100%;
        }

        .swiper-button-prev,
        .swiper-container-rtl .swiper-button-next {
            width: 30%;
            height: 30%;
            left: -50px
        }

        .swiper-button-prev,
        .swiper-button-next {
            top: 40px;
        }

        .merchant .right {
            background-color: #f4fff2;
        }

        .merchant .auto {
            width: 58%;
            margin-left: 3%;
        }

        .merchant .auto .top span {
            font-size: 23px;
            color: #333333;
        }

        .merchant .auto .top .biaoqian {
            display: flex;
            margin: 2% 0%;
        }

        .merchant .auto .top .biaoqian>div {
            line-height: 25px;
            background-color: #498e3d;
            padding: 0px 15px;
            margin-right: 2%;
        }

        .merchant .auto .top .biaoqian div:nth-child(2) {
            background-color: #f08200;
        }

        .merchant .auto .aut {
            display: flex;
            border-top: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
        }

        .merchant .auto .au .au-b {
            display: flex;
            margin: 10px 0px;
        }

        .merchant .auto .au .au-a strong {
            color: #ff5757;
            font-size: 28px;
            line-height: 90px;
            margin-right: 4%;
        }

        .merchant .auto .au .au-a span {
            color: #666666;
            text-decoration: line-through;

        }

        .merchant .auto .au .au-b div {
            cursor: pointer;
            padding: 0px 20px;
            margin-left: 20px;
            border: 1px solid #d4d4d4;
        }

        .merchant .auto .botton .butt {
            border-radius: 5px;
            width: 20%;
            height: 35px;
            border: 0px;
        }

        .merchant .auto .botton .jiaru {
            background-color: #ffae4f;
        }

        .merchant .auto .botton .goumai {
            background-color: #f08200;
        }

        .merchant .auto .aut span {
            margin-top: 5%;
            color: #666666;
            line-height: 30px;
        }

        .merchant .auto .botton #quantity {
            width: 6%;
        }

        .merchant .auto .botton>div {
            margin-top: 2%;
        }

        .merchant .auto .botton .fenxiang .icon-xingxing {
            color: #ec6a17;
        }

        .merchant .auto .botton .fenxiang .icon-xing {
            color: #ec6a17;
        }

        .shangpin {
            border: 1px solid #e4e4e4;
            margin: 20px 0.1%;
            width: 99%;
        }

        .shangpin .daohang {
            line-height: 45px;

            display: flex;
            background-color: #f4f4f4;
            width: 100%;
        }

        .shangpin .daohang>div {
            padding: 0px 20px;
        }

        .shangpin .daohang .xiangqing {
            border-top: 2px solid #498e3d;
            background-color: #fff;
            cursor: pointer;
        }

        .shangpin .daohang .pingjia {
            cursor: pointer;
        }

        .xiang {
            padding: 2%;
            width: 96%;
        }

        .xiang>div {
            width: 100%;

        }

        .xiang>div img {
            margin: 10px 0px;
            width: 100%;

        }

        .xiang p {
            line-height: 30px;
        }

        .xiang strong {
            line-height: 30px;
            color: #f19a72;
        }

        .jqur ul li {
            display: flex;
            border-bottom: 1px solid #e9e9e9;
            padding-bottom: 2%;
        }

        .jqur ul li .leftdiv {
            width: 12%;
        }

        .jqur ul li .odiv {
            padding: 2% 2%;
        }

        .jqur ul li .odiv img {
            width: 50px;
        }
      .modal-content{
          margin-top: 40%;
          border: 5px solid #e2e2e2;
          padding: 60px 70px;

      }
      .modal-content  .modal-body  .mgouwuche {
          font-size: 20px;
          text-align: center;
      }
      .modal-content  .modal-body  .mgouwuche i{
          font-size: 25px;
          color: #f08506;
      }
      .modal-content  .modal-body  .mgouwuche button{
          margin: 30px 5px 10px 5px;
      }
    </style>
</head>

<body>
    
    
    <div class="box">
                <!-- 模态框（Modal） -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="mgouwuche">
                                    <i class="icon iconfont icon-duihao1"></i>
                                    <span>已成功加入购物车</span>
                                    <br>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">继续购物
                                        </button>
                                        <button type="button" class="btn btn-primary">
                                            查看购物车
                                        </button>
                                </div>
                            </div>
                                
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>


        <div class="topnav">
            <span>当前位置:&nbsp; 首页 &nbsp;>全部商品&nbsp;>苹果&nbsp;>阿富汗</span>
        </div>
        <div class="merchant">
            <div class="left">
                <div class="zhaopian">
                    <img src="../img/lym/juzi.png" alt="">
                </div>
                <div>
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="zhaopian">
                                    <img src="../img/lym/juzi.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="zhaopian">
                                    <img src="../img/lym/juzi.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="zhaopian">
                                    <img src="../img/lym/juzi.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="zhaopian">
                                    <img src="../img/lym/juzi.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">Slide 2</div>
                            <div class="swiper-slide">Slide 3</div>
                        </div>
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>
                </div>
            </div>
            <div class="auto">
                <div class="top">
                    <span>新疆哈密瓜1500kg</span>
                    <div class="biaoqian">
                        <div>全国</div>
                        <div>礼拜五</div>
                        <div>次日达</div>
                        <div>自营</div>
                    </div>
                </div>
                <div class="aut">
                    <img src='../img/lym/zishen.png' alt="">
                    <span>雀斑石榴超级耳麦，什么而活层产自大理云南于1231年传入我国，皮薄肉厚，多汁多水，
                        很么中国三大石榴之一，四大石榴汁儿五大石榴之三，超级可口甘甜酸爽，不酸爽可口可不退款，爱买不爱超级的甜不买的话特别的吃块</span>
                </div>
                <div class="au">
                    <div class="au-a">
                        <strong>现价：￥20.0</strong><span>原价：￥40.0</span>
                    </div>

                    <div class="au-b">
                        <span>请选择规格</span>
                        <div>500g</div>
                        <div>1000g</div>
                        <div>2000g</div>
                    </div>
                    <div class="au-b">
                        <span>请选择规格</span>
                        <div>500g</div>
                        <div>1000g</div>
                    </div>
                </div>
                <div class="botton">
                    <div class="denglu">
                        <span>数量：</span>
                        <input id="min" name="" type="button" value="-" />
                        <input id="quantity" name="" type="text" value="1" />
                        <input id="add" name="" type="button" value="+" />
                        <span>件</span>
                        <button class="butt jiaru btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >加入购物车</button>
                        <button class="butt goumai">立即购买</button>
                    </div>
                    <div class="fenxiang">
                        <i class=" icon iconfont  icon-xingxing"></i>
                        <i class=" icon iconfont  icon-xing"></i>
                        <span>收藏此商品</span>
                        <span>分享到：</span>
                        <i class=" icon iconfont  icon-QQkongjian"></i>
                        <i class=" icon iconfont  icon-renrenwang"></i>
                        <i class=" icon iconfont  icon-Icon-"></i>
                        <i class=" icon iconfont  icon-douban "></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="shangpin">
            <div class="daohang">
                <div class="xiangqing ">商品详情</div>
                <div class="pingjia">商品评价</div>
            </div>
            <div class="xiang">
                <div class="jqur">
                    <strong>男士衬衫</strong>
                    <p>名水利和特别棒，是送朋友送亲人的不二人选</p>
                    <p>你说啥子，你都不知道啥叫明水礼盒，那你可是真的实数垃圾啊，这样吧你买个看看好用不，不好用不退款</p>
                    <p>完成交易，如有库存，则从新品消失</p>
                    <div>
                        <img src="../img/lym/hamigua.png" alt="">
                    </div>
                    <strong>男士衬衫</strong>
                    <p>名水利和特别棒，是送朋友送亲人的不二人选</p>
                    <p>你说啥子，你都不知道啥叫明水礼盒，那你可是真的实数垃圾啊，这样吧你买个看看好用不，不好用不退款</p>
                    <p>完成交易，如有库存，则从新品消失</p>
                    <div>
                        <img src="../img/lym/hamigua.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/swiper.js"></script>
<script src="../js/bootstrap.min.js"></script>

<script>
    var mySwiper = new Swiper('.swiper-container', {
        slidesPerView: 4,
        slidesPerGroup: 4,
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
    });
</script>
<script>
    $(function () {
        var t = $("#quantity");
        $("#add").click(function () {
            t.val(parseInt(t.val()) + 1);
            $("#min").removeAttr("disabled");                 //当按加1时，解除$("#min")不可读状态    
            setTotal();
        })
        $("#min").click(function () {
            if (parseInt(t.val()) > 1) {                     //判断数量值大于1时才可以减少    
                t.val(parseInt(t.val()) - 1)
            } else {
                $("#min").attr("disabled", "disabled")        //当$("#min")为1时，$("#min")不可读状态    
            }
            setTotal();
        })
        function setTotal() {
            $("#total").html((parseInt(t.val()) * 3.95).toFixed(2));
        }
        setTotal();
    })


    $('.xiangqing').on('click', function () {
        $(this).css({
            background: '#fff',
            borderTop: '2px solid #498e3d'
        }),
            $('.pingjia').css({
                background: '#f4f4f4',
                borderTop: '0px'
            }),
            $('.jqur').html('')
        for (var i = 0; i < 2; i++) {
            $('<strong>').appendTo($('.jqur')).html('男士短衬衫');
            $('<p>').appendTo($('.jqur')).html('名水利和特别棒，是送朋友送亲人的不二人选');
            $('<p>').appendTo($('.jqur')).html('你说啥子，你都不知道啥叫明水礼盒，那你可是真的实数垃圾啊，这样吧你买个看看好用不，不好用不退款');
            $('<p>').appendTo($('.jqur')).html('完成交易，如有库存，则从新品消失');
            var odiv = $('<div>').appendTo($('.jqur'));
            $('<img>').appendTo(odiv).attr('src', '../img/lym/hamigua.png')
        }
    })

    $('.pingjia').on('click', function () {
        $(this).css({
            background: '#fff',
            borderTop: '2px solid #498e3d'
        }),
            $('.xiangqing').css({
                background: '#f4f4f4',
                borderTop: '0px'
            }),
            $('.jqur').html('');
        var oul = $('<ul>').appendTo($('.jqur'));
        for (var a=0; a<4; a++) {
            var oli = $('<li>').appendTo(oul);
            var leftdiv = $('<div>').appendTo(oli).addClass('leftdiv')
            $('<img>').appendTo(leftdiv).attr('src', '../img/lym/touxiang.png');
            $('<span>').appendTo(leftdiv).html('12424565423');
            var odiv = $('<div>').appendTo(oli).addClass('odiv');
            for (var i = 0; i <5; i++) {
                $('<i>').appendTo(odiv).addClass('icon iconfont  icon-xingxing');
            }
            $('<p>').appendTo(odiv).html('帮同事买的，不错性价比高');
            var adiv = $('<div>').appendTo(odiv);

            var bdiv = $('<div>').appendTo(adiv);
            $('<img>').appendTo(bdiv).attr('src', '../img/lym/tupian.png')
        }
    });



</script>
</html>